<template>
  <div
    class="charts_display_module"
    :style="{
      left: sidebar.opened ? '210px' : '54px'
    }"
    @click.self="onChartsClose"
  >
    <div ref="content" class="charts-display-content">
      <template v-if="isAvailable">
        <div class="row">
          <basic-card
            v-for="card in mock_cardsList"
            :key="card.title"
            :num="card.num"
            :rate="card.rate"
            :type="mapCardType[card.key]"
            :title="card.title"
            :subTitle="card.subTitle"
            class="card"
          />
        </div>
        <div class="row">
          <div class="case timeLine">
            <header>
              <h4>任务完成情况</h4>
              <span>动态展示每日各类型任务完成总数</span>
            </header>
            <dynamic-line class="dynamic-line" :controller="selectedController" :data="mock_tasksLine" @onChartSelectedChange="onChartSelectedChange" />
          </div>
        </div>
        <div class="row">
          <div class="case employees">
            <div class="chart">
              <header>
                <h4>员工绩效统计</h4>
                <span>展示员工参与的各类工序的数量</span>
              </header>
              <dynamic-bar class="dynamic-bar" :controller="selectedController" :data="FormatedDataForBar" @onChartSelectedChange="onChartSelectedChange" />
            </div>
            <div class="list">
              <div v-for="(employee, index) in mock_employee" :key="index" class="employee">
                <div class="row">
                  <avator :username="employee.name" size="mini" />
                  <div class="message">
                    <span>{{ employee.apartment }}</span>
                    <span>{{ employee.name }}</span>
                  </div>
                  <div class="nums-message">
                    <span>相关任务总数</span>
                    <scroll-num
                      class="num"
                      :num="employee.total"
                      :height="22"
                      :fontStyle="{
                        fontSize: '18px',
                        fontWeight: 400,
                        width: '10px'
                      }"
                    />
                  </div>
                </div>
                <div v-for="(value, key) in employee.tasks" :key="key" class="row rate">
                  <template v-if="selectedController[mapZhCN[key]]">
                    <span>{{ mapZhCN[key] }}</span>
                    <el-progress
                      :text-inside="true"
                      :stroke-width="18"
                      :percentage="computeRate(value, key)"
                      :color="mapColor[key]"
                      text-color="#FFFFFF"
                    />
                  </template>
                </div>
              </div>
            </div>
          </div>
          <div class="case others">
            <header>
              <div class="title">
                <h4>表类型统计</h4>
                <span>展示各类型表的总数</span>
              </div>
              <div class="buttons">
                <i class="iconfont icon-reset" />
              </div>
            </header>
            <ul>
              <li
                v-for="(sub_value, sub_key) in mock_meterType"
                :key="sub_key"
                :class="{
                  isMin: sub_value === minMeter,
                  isMax: sub_value === maxMeter
                }"
              >
                <span>{{ sub_key }}</span>
                <scroll-num
                  class="num"
                  :num="sub_value"
                  :height="25"
                  :fontStyle="{
                    fontSize: '20px',
                    fontWeight: 400,
                    width: '11px'
                  }"
                />
              </li>
            </ul>
            <!-- <div class="tools">
              <div class="button">
                <span>跳转至工序数据分析页面</span>
                <i class="el-icon-right" />
              </div>
            </div> -->
          </div>
        </div>
      </template>
      <div v-else class="empty">
        <img src="@/assets/empty_status.png" height="250px" />
        <span>数据分析功能正在开发中...</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Getter } from 'vuex-class'
import { Component, Emit, Ref } from 'vue-property-decorator'
import Avator from '@/components/basic/Avator.vue'
import ScrollNum from '@/components/tool/ws-scroll-num.vue'
import BasicCard from '@/components/echarts/basic_card.vue'
import DynamicBar from '@/components/dashboard/DynamicBar.vue'
import DynamicLine from '@/components/dashboard/DynamicLine.vue'
import { Dictionary } from 'vue-router/types/router'
function generateRandomArray(length: number) {
  const array = []
  for (let i = 0; i < length; i++) {
    array.push(Math.floor(Math.random() * 100))
  }
  return array
}
function generateDateArray(startDate: string, length: number) {
  const dates = []
  const currentDate = new Date(startDate)
  for (let i = 0; i < length; i++) {
    dates.push(new Date(currentDate))
    currentDate.setDate(currentDate.getDate() + 1)
  }
  return dates.map(date => date.toLocaleDateString())
}
@Component({
  components: {
    Avator,
    ScrollNum,
    BasicCard,
    DynamicBar,
    DynamicLine
  }
})
class ChartsDisplay extends Vue {
  @Getter('sidebar') sidebar!: { opened: boolean }
  @Ref() content!: HTMLElement
  isAvailable: boolean = true
  mapZhCN: Dictionary<string> = {
    completed: '已完成',
    approach: '即将超时',
    overtime: '已超时',
    underway: '进行中'
  }
  mapColor: Dictionary<string> = {
    completed: '#28DCD0',
    approach: '#FFE37E',
    overtime: '#F37D84',
    underway: '#82C2E6'
  }
  mapCardType: Dictionary<string> = {
    completed: 'success',
    approach: 'warning',
    overtime: 'error',
    underway: 'primary'
  }
  selectedController: Dictionary<boolean> = {
    进行中: true,
    已完成: true,
    即将完成: true,
    已超时: true
  }
  mock_cardsList: Dictionary<string | number>[] = [
    { num: 423, rate: 0.02, key: 'underway', title: '进行中', subTitle: '较上周' },
    { num: 45, rate: 0.032, key: 'approach', title: '即将超时', subTitle: '较上周' },
    { num: 352, rate: -0.015, key: 'completed', title: '已完成', subTitle: '较上周' },
    { num: 165, rate: 0.012, key: 'overtime', title: '已超时', subTitle: '较上周' }
  ]
  mock_tasksLine: Dictionary<string[] | number[]> = {
    xData: generateDateArray('2022-3-1', 500),
    underway: generateRandomArray(500),
    completed: generateRandomArray(500),
    approach: generateRandomArray(500),
    overtime: generateRandomArray(500)
  }
  mock_employee = [
    {
      name: '一号用户',
      apartment: '生产部',
      total: 98,
      tasks: {
        completed: 34,
        approach: 25,
        overtime: 26,
        underway: 15
      }
    },
    {
      name: '二号用户',
      apartment: '生产部',
      total: 82,
      tasks: {
        completed: 25,
        approach: 11,
        overtime: 26,
        underway: 5
      }
    },
    {
      name: '三号用户',
      apartment: '生产部',
      total: 43,
      tasks: {
        completed: 10,
        approach: 11,
        overtime: 26,
        underway: 5
      }
    },
    {
      name: '四号用户',
      apartment: '生产部',
      total: 132,
      tasks: {
        completed: 10,
        approach: 11,
        overtime: 26,
        underway: 5
      }
    },
    {
      name: '五号用户',
      partment: '生产部',
      total: 34,
      tasks: {
        completed: 10,
        approach: 11,
        overtime: 26,
        underway: 5
      }
    },
    {
      name: '六号用户',
      apartment: '生产部',
      total: 78,
      tasks: {
        completed: 10,
        approach: 11,
        overtime: 26,
        underway: 5
      }
    },
    {
      name: '七号用户',
      apartment: '生产部',
      total: 56,
      tasks: {
        completed: 10,
        approach: 11,
        overtime: 26,
        underway: 5
      }
    }
  ]
  mock_meterType = {
    WA6: 251,
    WA8: 23,
    WA9: 2681,
    WA1: 356,
    WA4: 56,
    哈特: 15,
    真兰: 6,
    埃科: 7
  }
  get minMeter() {
    return Math.min(...Object.values(this.mock_meterType))
  }
  get maxMeter() {
    return Math.max(...Object.values(this.mock_meterType))
  }
  get FormatedDataForBar() {
    const xAxisData: string[] = []
    const completedData: number[] = []
    const approachData: number[] = []
    const overtimeData: number[] = []
    const underwayData: number[] = []
    this.mock_employee.forEach(employee => {
      const { completed, approach, underway, overtime } = employee.tasks
      xAxisData.push(employee.name)
      completedData.push(completed)
      approachData.push(approach)
      overtimeData.push(overtime)
      underwayData.push(underway)
    })
    return {
      xAxisData,
      approachData,
      overtimeData,
      underwayData,
      completedData
    }
  }
  mounted() {
    this.content.animate(
      [
        { transform: 'translateY(100px)', opacity: 0 },
        { transform: 'translateY(0)', opacity: 1 }
      ],
      { duration: 1500, easing: 'ease', fill: 'both' }
    )
  }
  @Emit('onChartsClose')
  onChartsClose() {
    return
  }
  computeRate(value: number, key: string) {
    const card = this.mock_cardsList.find(card => card.key === key)
    if (!card) return 0
    const totalNum = card.num as number
    return Number(((value / totalNum) * 100).toFixed(2))
  }
  onChartSelectedChange(e: { selected: Dictionary<boolean> }) {
    const { selected } = e
    this.selectedController = selected
  }
}
export default ChartsDisplay
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.charts_display_module {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  backdrop-filter: blur(20px);
  transition: all 0.5s ease;
  #flex(row, center, center);
  .charts-display-content {
    box-sizing: border-box;
    padding: 20px;
    border-radius: 10px;
    overflow: auto;
    #flex(column, flex-start, flex-start);
    #color(background-color, --module-bg-color);
    #shadow-color(0, 0, 18px, 1px, --primary-shadow-color);
    .empty {
      #flex(column, center, space-betwwen);
      .core {
        height: 35px;
      }
      span {
        margin-top: -40px;
        font-size: 18px;
        font-weight: 500;
      }
    }
    header {
      height: 40px;
      margin-bottom: 10px;
      #flex(column, flex-start, flex-start);
      h4 {
        position: relative;
        margin-block: 0;
        font-size: 16px;
        font-weight: 900;
        transform-style: preserve-3d;
        #color(color, --primary-text-color);
      }
      h4::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        transform: translateZ(-1px);
        transition: left 0.5s ease;
        #color(background-color, --gray-blue-color);
      }
      h4:hover::after {
        left: calc(100% - 5px);
      }
      span {
        font-size: 12px;
        #color(color, --lighter-text-color);
      }
    }
    .row {
      width: 100%;
      margin-bottom: 20px;
      flex-wrap: wrap;
      #flex(row, center, flex-start);
      .card {
        margin-right: 20px;
        // margin-bottom: 20px;
        transition: all 0.5s ease;
      }
      .card:last-child {
        margin-right: 0;
      }
      .card:hover {
        transform: translateY(-10px);
      }
      .case {
        box-sizing: border-box;
        padding: 10px;
        border-radius: 10px;
        #shadow-color(0, 0, 4px, 1px, --primary-shadow-color);
      }
      .timeLine {
        width: 100%;
        height: 300px;
        .dynamic-line {
          height: 230px;
        }
      }
      .employees {
        box-sizing: border-box;
        padding: 10px;
        border-radius: 10px;
        width: 650px;
        height: 300px;
        #flex(row, flex-start, space-between);
        #shadow-color(0, 0, 4px, 1px, --primary-shadow-color);
        .chart {
          width: 400px;
          height: 300px;
          .dynamic-bar {
            width: 100%;
            height: 230px;
          }
        }
        .list {
          box-sizing: border-box;
          padding: 5px;
          flex: 1;
          height: 100%;
          margin-left: 10px;
          overflow: auto;
          .employee {
            box-sizing: border-box;
            padding: 8px;
            margin-bottom: 10px;
            border-radius: 5px;
            #flex(column, flex-start, space-between);
            #shadow-color(0, 0, 4px, 1px, --primary-shadow-color);
            .row {
              position: relative;
              margin-bottom: 8px;
              #flex(row, center, flex-start);
              .message {
                #flex(column, flex-start, space-between);
                span {
                  font-size: 14px;
                  #color(color, --primary-text-color);
                }
                span:first-child {
                  font-size: 12px;
                  #color(color, --lighter-text-color);
                }
              }
              .nums-message {
                position: absolute;
                right: 0;
                #flex(column, flex-end, space-between);
                span {
                  font-size: 12px;
                  #color(color, --lighter-text-color);
                }
              }
            }
            .rate > span {
              width: 60px;
              text-align: left;
              font-size: 12px;
              #color(color, --primary-text-color);
            }
            /deep/.el-progress {
              flex: 1;
              align-content: flex-end;
              #flex(row, center, space-between);
              .el-progress__text {
                font-size: 14px !important;
              }
            }
          }
        }
        ::-webkit-scrollbar {
          width: 0;
        }
      }
      .others {
        flex: 1;
        padding: 10px 0;
        height: 300px;
        margin-left: 10px;
        #flex(column, center, flex-start);
        header {
          box-sizing: border-box;
          padding: 0 10px;
          width: 100%;
          margin-bottom: 5px;
          #flex(row, center, space-between);
          .title {
            #flex(column, flex-start, flex-start);
          }
        }
        ul {
          width: 100%;
          max-width: 260px;
          margin-bottom: 10px;
          flex-wrap: wrap;
          #flex(row, center, flex-start);
          li {
            box-sizing: border-box;
            padding: 10px 5px;
            margin: 5px;
            width: 28%;
            border: solid 1px;
            overflow: hidden;
            transition: all 0.5s ease;
            cursor: pointer;
            #flex(column, center, center);
            #color(border-color, --module-bg-color);
            span {
              border: unset;
              font-size: 12px;
              padding: 0;
              margin: 0;
              white-space: nowrap;
              #color(color, --lighter-text-color);
            }
            .num {
              /deep/ul > li {
                #color(color, --lighter-blue-color);
              }
            }
          }
          li:hover {
            border-radius: 12px;
            transform: translateY(-5px);
            #shadow-color(0, 0, 4px, 1px, --primary-blue-color);
          }
          .isMin {
            .num {
              /deep/ul > li {
                #color(color, --lighter-red-color);
              }
            }
          }
          .isMax {
            .num {
              /deep/ul > li {
                #color(color, --lighter-green-color);
              }
            }
          }
        }
        .tools {
          width: 100%;
          #flex(column, center, flex-start);
          .button {
            box-sizing: border-box;
            width: 90%;
            padding: 10px;
            border-radius: 5px;
            color: #ffffff;
            transition: all 0.5s ease;
            cursor: pointer;
            #flex(row, center, space-between);
            #color(background-color, --primary-blue-color);
            #shadow-color(0, 0, 4px, 1px, --primary-shadow-color);
            span {
              font-size: 14px;
            }
          }
          .button:hover {
            transform: translateY(-5px);
            #color(background-color, --heavier-blue-color);
          }
        }
      }
    }
    .row:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
